<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas width="500" height="500"></canvas>

    <script>
        let cv = document.querySelector('canvas')

        if (cv.getContext) {
            let c = cv.getContext('2d');

            c.lineWidth = 2
            c.strokeStyle = 'red'
            c.moveTo(75, 40);
            c.bezierCurveTo(75, 37, 70, 25, 50, 25);
            c.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            c.bezierCurveTo(20, 80, 40, 102, 75, 120);
            c.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            c.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            c.bezierCurveTo(85, 25, 75, 37, 75, 40);

            c.stroke()
        } else {
            console.log('您的浏览器不支持canvas,请升级');
        }
    </script>
</body>

</html>